<template>
	<view class="container" style="padding-top: 10px;">
		<view class="floor">
			<view class="title">巡检单编号</view>
			<view class="content">
				<input type="text" v-model="dict.seqNo" placeholder="请输入巡检单编号" disabled="true" readonly />
			</view>
		</view>
		<view class="floor">
			<view class="title">健身设施</view>
			<view class="content" style="height: 30vh;overflow: overlay;">
				<input type="text" v-model="dict.desFitnessFacilities" placeholder="请输入健身设施巡检结果" />
				<view v-for="(image, index) in dict.imgDesFitnessFacilities" :key="index">
					<image :src="item.url"  @longtap="deleteIt(1)" v-if="dict.imgDesRainwaterWells[0].url != ''"></image>
				</view>
				<button @click="addPic(1)">+</button>
				<!-- <view class="upload-file">
					<view class="file-item">
						<uni-file-picker v-model="item.url" fileMediatype="image"
							@select="addPic(1)" @delete="deleteIt(1)" limit="10"
							title="请选择图片: 最多选择10张图片"></uni-file-picker>
					</view>
				</view> -->
			</view>
		</view>
		<view class="floor">
			<view class="title">雨污水井</view>
			<view class="content" style="height: 30vh;overflow: overlay;">
				<input type="text" v-model="dict.desRainwaterWells" placeholder="请输入雨污水井巡检结果" />
				<image :src="dict.imgDesRainwaterWells[0].url" @longtap="deleteIt(2)"
					v-if="dict.imgDesRainwaterWells[0].url != ''"></image>
				<button @click="addPic(2)">+</button>
			</view>
		</view>
		<view class="floor">
			<view class="title">儿童游乐场</view>
			<view class="content" style="height: 30vh;overflow: overlay;">
				<input type="text" v-model="dict.desPlayground" placeholder="请输入儿童游乐场巡检结果" />
				<image :src="dict.imgDesPlayground[0].url" @longtap="deleteIt(3)"
					v-if="dict.imgDesPlayground[0].url != ''"></image>
				<button @click="addPic(3)">+</button>
			</view>
		</view>
		<view class="floor">
			<view class="title">水箱间</view>
			<view class="content" style="height: 30vh;overflow: overlay;">
				<input type="text" v-model="dict.desWaterTank" placeholder="请输入水箱间巡检结果" />
				<image :src="dict.imgDesWaterTank[0].url" @longtap="deleteIt(4)"
					v-if="dict.imgDesWaterTank[0].url != ''"></image>
				<button @click="addPic(4)">+</button>
			</view>
		</view>
		<view class="floor">
			<view class="title">变电所</view>
			<view class="content" style="height: 30vh;overflow: overlay;">
				<input type="text" v-model="dict.desSubstation" placeholder="请输入变电所巡检结果" />
				<image :src="dict.imgDesSubstation[0].url" @longtap="deleteIt(5)"
					v-if="dict.imgDesSubstation[0].url != ''"></image>
				<button @click="addPic(5)">+</button>
			</view>
		</view>
		<view class="floor">
			<view class="title">公共照明</view>
			<view class="content" style="height: 30vh;overflow: overlay;">
				<input type="text" v-model="dict.desPublicLighting" placeholder="请输入公共照明巡检结果" />
				<image :src="dict.imgDesPublicLighting[0].url" @longtap="deleteIt(6)"
					v-if="dict.imgDesPublicLighting[0].url != ''"></image>
				<button @click="addPic(6)">+</button>
			</view>
		</view>
		<view class="floor">
			<view class="title">路面</view>
			<view class="content" style="height: 30vh;overflow: overlay;">
				<input type="text" v-model="dict.desPavement" placeholder="请输入路面巡检结果" />
				<image :src="dict.imgDesPavement[0].url" @longtap="deleteIt(7)" v-if="dict.imgDesPavement[0].url != ''">
				</image>
				<button @click="addPic(7)">+</button>
			</view>
		</view>
		<view class="floor">
			<view class="title">公共区域</view>
			<view class="content" style="height: 30vh;overflow: overlay;">
				<input type="text" v-model="dict.desPublicAreas" placeholder="请输入公共区域巡检结果" />
				<image :src="dict.imgDesPublicAreas[0].url" @longtap="deleteIt(8)"
					v-if="dict.imgDesPublicAreas[0].url != ''"></image>
				<button @click="addPic(8)">+</button>
			</view>
		</view>
		<view class="floor">
			<view class="title">楼宇门</view>
			<view class="content" style="height: 30vh;overflow: overlay;">
				<input type="text" v-model="dict.desBuildingDoors" placeholder="请输入楼宇门巡检结果" />
				<image :src="dict.imgDesBuildingDoors[0].url" @longtap="deleteIt(9)"
					v-if="dict.imgDesBuildingDoors[0].url != ''"></image>
				<button @click="addPic(9)">+</button>
			</view>
		</view>
		<view class="floor">
			<view class="title">泵房</view>
			<view class="content" style="height: 30vh;overflow: overlay;">
				<input type="text" v-model="dict.desPumpRoom" placeholder="请输入泵房巡检结果" />
				<image :src="dict.imgDesPumpRoom[0].url" @longtap="deleteIt(10)"
					v-if="dict.imgDesPumpRoom[0].url != ''"></image>
				<button @click="addPic(10)">+</button>
			</view>
		</view>
		<button type="primary" style="width: 80%;margin: 20px auto;" @click="sendInfo();">提交</button>
	</view>
</template>

<script>
	import config from '@/config/config.js'
	import {
		flowInspectionDayInsert,
		flowInspectionDayEdit,
		fileUpload
	} from "@/api/home.js"
	export default {
		data() {
			return {
				dict: {
					id: '',
					desFitnessFacilities: "",
					imgDesFitnessFacilities: [{
						url: '',
						name: ''
					}],
					desRainwaterWells: "",
					imgDesRainwaterWells: [{
						url: '',
						name: ''
					}],
					desPlayground: "",
					imgDesPlayground: [{
						url: '',
						name: ''
					}],
					desWaterTank: "",
					imgDesWaterTank: [{
						url: '',
						name: ''
					}],
					desSubstation: "",
					imgDesSubstation: [{
						url: '',
						name: ''
					}],
					desPublicLighting: "",
					imgDesPublicLighting: [{
						url: '',
						name: ''
					}],
					desPavement: "",
					imgDesPavement: [{
						url: '',
						name: ''
					}],
					desPublicAreas: "",
					imgDesPublicAreas: [{
						url: '',
						name: ''
					}],
					desBuildingDoors: "",
					imgDesBuildingDoors: [{
						url: '',
						name: ''
					}],
					desPumpRoom: "",
					imgDesPumpRoom: [{
						url: '',
						name: ''
					}]
				}
			}
		},
		onLoad(t) {
			console.log('t.item', t.item);
			var x = JSON.parse(t.item);
			console.log(x);
			this.dict = {
				seqNo: x.seqNo,
				desFitnessFacilities: x.desFitnessFacilities,
				imgDesFitnessFacilities: [{
					url: x.imgDesFitnessFacilities || "",
					name: ''
				}],
				desRainwaterWells: x.desRainwaterWells,
				imgDesRainwaterWells: [{
					url: x.imgDesRainwaterWells || "",
					name: ''
				}],
				desPlayground: x.desPlayground,
				imgDesPlayground: [{
					url: x.imgDesPlayground || "",
					name: ''
				}],
				desWaterTank: x.desPlayground,
				imgDesWaterTank: [{
					url: x.imgDesWaterTank || "",
					name: ''
				}],
				desSubstation: x.desSubstation,
				imgDesSubstation: [{
					url: x.imgDesSubstation || "",
					name: ''
				}],
				desPublicLighting: x.desPublicLighting,
				imgDesPublicLighting: [{
					url: x.imgDesPublicLighting || "",
					name: ''
				}],
				desPavement: x.desPavement,
				imgDesPavement: [{
					url: x.imgDesPavement || "",
					name: ''
				}],
				desPublicAreas: x.desPublicAreas,
				imgDesPublicAreas: [{
					url: x.imgDesPublicAreas || "",
					name: ''
				}],
				desBuildingDoors: x.desBuildingDoors,
				imgDesBuildingDoors: [{
					url: x.imgDesBuildingDoors || "",
					name: ''
				}],
				desPumpRoom: x.desPumpRoom,
				imgDesPumpRoom: [{
					url: x.imgDesPumpRoom || "",
					name: ''
				}]
			}
			if (x.id) {
				this.dict.id = x.id;
			}
		},
		computed: {
			image() {
				const ImageArray = this.imageValue.map((item) => {
					return item.imgRul
				})
				const ImageString = ImageArray.join()
				console.log(ImageString);
				return ImageString
			}
		},
		methods: {
			addPic(t) {
				console.log('触发', t)
				var that = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						console.log('res', res);
						var arr = res.tempFilePaths;
						console.log('arr', arr);
						for (var i = 0; i < arr.length; i++) {
							uni.uploadFile({
								url: 'https://www.ansteelproperty.com/special/dictionary/files/upload/',
								header: {
									"Authorization": uni.getStorageSync("token"),
									"X-Requested-With": 'XMLHttpRequest',
									"Accept": "application/json"
								},
								method: "post",
								filePath: arr[i],
								fileType: 'image',
								name: 'file',
								formData: {
									'filea': arr[i]
								},
								success: (result) => {
									var json = JSON.parse(result.data);
									if (json.code == 200) {
										const redirectUri = `${config.baseUrl}`
										console.log('redirectUri', redirectUri)
										if (t == 1) {
											that.dict.imgDesFitnessFacilities = [{
												url: redirectUri + json.msg,
												name: ""
											}]
										} else if (t == 2) {
											that.dict.imgDesRainwaterWells = [{
												url: redirectUri + json.msg,
												name: ""
											}]
										} else if (t == 3) {
											that.dict.imgDesPlayground = [{
												url: redirectUri + json.msg,
												name: ""
											}]
										} else if (t == 4) {
											that.dict.imgDesWaterTank = [{
												url: redirectUri + json.msg,
												name: ""
											}]
										} else if (t == 5) {
											that.dict.imgDesSubstation = [{
												url: redirectUri + json.msg,
												name: ""
											}]
										} else if (t == 6) {
											that.dict.imgDesPublicLighting = [{
												url: redirectUri + json.msg,
												name: ""
											}]
										} else if (t == 7) {
											that.dict.imgDesPavement = [{
												url: redirectUri + json.msg,
												name: ""
											}]
										} else if (t == 8) {
											that.dict.imgDesPublicAreas = [{
												url: redirectUri + json.msg,
												name: ""
											}]
										} else if (t == 9) {
											that.dict.imgDesBuildingDoors = [{
												url: redirectUri + json.msg,
												name: ""
											}]
										} else if (t == 10) {
											that.dict.imgDesPumpRoom = [{
												url: redirectUri + json.msg,
												name: ""
											}]
										}
									}
								}
							});
						}
					}
				})
			},
			deleteIt(t) {
				var that = this;
				uni.showModal({
					title: "提示",
					content: "是否确认删除",
					success(res) {
						if (res.confirm == true) {
							if (t == 1) {
								that.dict.imgDesFitnessFacilities[0].url = "";
							} else if (t == 2) {
								that.dict.imgDesRainwaterWells[0].url = "";
							} else if (t == 3) {
								that.dict.imgDesPlayground[0].url = "";
							} else if (t == 4) {
								that.dict.imgDesWaterTank[0].url = "";
							} else if (t == 5) {
								that.dict.imgDesSubstation[0].url = "";
							} else if (t == 6) {
								that.dict.imgDesPublicLighting[0].url = "";
							} else if (t == 7) {
								that.dict.imgDesPavement[0].url = "";
							} else if (t == 8) {
								that.dict.imgDesPublicAreas[0].url = "";
							} else if (t == 9) {
								that.dict.imgDesBuildingDoors[0].url = "";
							} else if (t == 10) {
								that.dict.imgDesPumpRoom[0].url = "";
							}
						}
					}
				})
			},
			sendInfo() {
				if (this.dict.seqNo) {
					console.log('this.dict', this.dict)
					flowInspectionDayEdit({
						...this.dict
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: "操作成功",
								icon: "none",
								duration: 1000,
								success() {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						} else {
							uni.showToast({
								title: "操作失败",
								icon: "none"
							})
						}
					}).catch(err => {
						uni.showToast({
							title: "网络异常",
							icon: "none"
						})
					})
				} else {
					console.log('this.dict', this.dict)
					flowInspectionDayInsert({
						...this.dict
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: "操作成功",
								icon: "none",
								duration: 1000,
								success() {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						} else {
							uni.showToast({
								title: res,
								icon: "none"
							})
						}
					}).catch(err => {
						uni.showToast({
							title: "网络异常",
							icon: "none"
						})
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		background-color: #fff !important;
	}

	uni-input {
		height: 70rpx !important;
		line-height: 70rpx !important;
	}

	.floor {
		width: 100%;
		overflow: hidden;
		margin-bottom: 5px;

		.title {
			float: left;
			width: 120px;
			line-height: 36px;
			text-align: center;
			font-size: 14px;
			color: #666666;
		}

		.content {
			float: left;
			width: calc(100% - 130px);
			height: 70rpx;
			line-height: 70rpx;
			border-bottom: 1px solid #ccc;

			uni-button {
				width: 60px;
				height: 60px;
				line-height: 60px;
				display: block;
				margin: 10px;
			}

			uni-image {
				width: 60px;
				height: 60px;
				line-height: 60px;
				display: block;
				margin: 10px;
			}
		}
	}
</style>